<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title>监听器</title>
		<script src="Vue.js"></script>
		<style type="text/css">
			*{
				margin:0;
				padding:0;
			}
			html,body{
				height:100%;
				width:100%;
			}
			#app{
				width:600px;
				min-height:300px;
				border:2px solid black;
				margin:50px auto;
				padding:20px;
				box-shadow:10px 20px 20px 10px gray;
			}
			p{
				margin:20px 0;
			}
			h3{
				height:40px;
				line-height:40px;
				text-align:center;
				background-color:black;
				color:white;
			}
		</style>
	</head>
	<body>
		<div id="app">
			<h3>监听器</h3>
			<p>监听器：数据一旦发生改变就通知监听器所绑定的方法。</p>
			<p>监听器应用场景：数据变化时执行异步或开销较大的操作</p>
			<hr>
			<p><span>名:</span><input type="text" v-model="firstName" v-focus></p>
			<p><span>姓:</span><input type="text" v-model="lastName"></p>
			<p><span>{{fullName}}</span></p>
		</div>
		
		<script>
			let vm = new Vue({
				el:"#app",
				data:{
					firstName:"Jim",
					lastName:"Green",
					fullName:"Jim Green"
				},
				watch:{
					firstName:function(newValue){
						this.fullName = newValue+" "+this.lastName;
					},
					lastName:function(newValue){
						this.fullName = this.firstName+" "+newValue;
					}
				},
				directives:{
					"focus":{
						inserted:function(el){
							el.focus();
						}
					}
				}
			})
		</script>
	</body>
</html>
